<template>
    <div>
        <navtitle :title="title" />
        <van-search v-model="value" shape="round" background="rgb(158, 8, 8)" placeholder="请输入搜索关键词" />
        <div v-for="item in searchApiData">
            <van-card :price="item.goods_price" :title="item.goods_name"
                :thumb="item.goods_big_logo ?item.goods_big_logo :'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
        </div>

    </div>
</template>

<script setup>
import navtitle from '@/components/navtitle.vue';
import { ref, watch } from 'vue'
// 引入接口
import { searchApi } from '@/api/api'
const title = '搜索内容'
const value = ref()
const searchApiData = ref([])
// 监听输入框数据
watch(value, (count) => {
    //   console.log(`Count is: ${count}`)
    searchApi(count).then((res) => {
        console.log('搜索', res);
        searchApiData.value = res.data.message.goods
    })
})
</script>

<style lang="scss" scoped></style>